<template>
	<view class="container">
		<view class="collectionList">
			<view class="cItem" v-for="collection in collectionList" :key="collection._id" @click="goDetail(collection.goods_id)">
				<image :src="collection.img"></image>
				<view class="content">
					<view class="text">{{ collection.name }}</view>
					<view class="price"><text>￥</text>{{collection.price}}</view>
				</view>
			</view>
			
		</view>
		<MyLoading v-model:lodingType="loadType" />
	</view>
</template>

<script setup>
	import { onLoad,onReachBottom,onShow } from '@dcloudio/uni-app'
	import { reactive,toRefs,ref } from 'vue'
	import {
		userStore
	} from '../../stores/userInfo/userInfo.js'
	import {
		getToken
	} from '../../utils/localStoreToken.js'
	import MyLoading from '@/components/MyLoading'
	import { collection } from '@/api'
	let userInfo = reactive({})
	let loadType = ref('more')
	let collectionParams = reactive({
		uid: '',
		skip: '0',
		limit: '6'
	})
	let collectionList = ref([])
	
	
	// 去商品详情
	function goDetail(_id) {
		uni.navigateTo({
			url: `/pages/goodsDetail/goodsDetail?goods=${_id}`
		})
	}
	
	// 获取收藏列表
	function getCollectionList() {
		loadType.value = 'loading'
		collection.reqCollectionList(collectionParams).then(res => {
			if(res.code === 1) {
				let data = collectionList.value
				data.push(...res.data)
				collectionList.value = data
				if(res.count <= collectionList.value.length) {
					loadType.value = 'loaded'
				}else {
					loadType.value = 'more'
				}
				
			}
		})
	}

	
	//到底部触发
	onReachBottom(() => {
		if(loadType.value === 'loading' || loadType.value === 'loaded') return
		collectionParams.skip = collectionList.value.length
		getCollectionList()
	})

	onLoad(() => {
		const user = userStore()
		collectionParams.uid = user.userInfo._id
		collectionParams.skip = 0
		collectionList.value = []
		getCollectionList()
	})
</script>

<style lang="scss" scoped>
	.container{
		min-height: calc(100vh - 85rpx);
		height: max-content;
		background-color: #f8f8f8;
		.collectionList{
			.cItem{
				background-color: #fff;
				padding: 40rpx 40rpx;
				display: flex;
				image{
					width: 200rpx;
					height: 200rpx;
					margin-right: 40rpx;
				}
				.content{
					flex:1;
					display: flex;
					flex-direction: column;
					.text{
						font-size: 35rpx;
						overflow: hidden;
						color: #3d4250;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						text-overflow: ellipsis;
					}
					.price{
						color: #fdd30e;
						font-size: 35rpx;
						text{
							font-size: 26rpx;
						}
					}
				}
			}
		}
	}
</style>
